<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			#main {
				width: 400px;
				height: 400px;
				background-color: white;
				border: 2px solid #87ceeb;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}

			#container {
				width: 100%;
				height: 400px;
				position: relative;
				top: -100px;
			}

			.row {
				width: 100%;
				height: 100px;
			}

			.cell {
				width: 100px;
				height: 100px;
				float: left;
			}

			.black {
				background-color: black;
			}

			#score {
				text-align: center;
			}
		</style>
		<h1 id="score">0</h1>
		<div id="main">
			<div id="container"></div>
		</div>
		<script type="text/javascript">
			var clock = null; //定时器操作句柄
			var state = 0; // 0初始化状态 1进行中 2暂停 3失败 
			var speed = 2;
			//初始化
			function init() {
				for (var i = 0; i < 4; i++) {
					crow();
				}
				$('main').onclick = function(ev) {
					judge(ev);
				}
			}

			function judge(ev) {
				if (state == 3) {
					alert("不可点击");
					return;
				}
				if(ev.target.className.indexOf('black') == -1){

				} else {
					ev.target.className = 'cell';
					ev.target.parentNode.pass = 1;
					score();
				}
				// console.log(ev.target)
			}

			//start()启动
			function start() {
				clock = window.setInterval('move()', 20);
			}
			//动画
			function move() {
				var con = $('container');
				var top = parseInt(window.getComputedStyle(con, null)['top']);
				// top += speed; //调节每次下降的像素//速度 

				if (speed + top > 0) {
					top = 0;
				}else{
					top += speed;//调节每次下降的像素
				}

				con.style.top = top + 'px';

				if (top == 0) {
					crow();
					con.style.top = '-100px';
					drow();
				} else if (top == (-100 + speed)) {
					var rows = con.childNodes;
					if ((rows.length == 5) && (rows[rows.length - 1].pass !== 1)) {
						fall();
					}
				}
			}
			//加速
			function jiasu() {
				speed += 2;
				if (speed == 20) {
					alert('卡了');
				}
			}
			//输了直接淘汰
			function fall() {
				clearInterval(clock);
				state = 3;
				alert("游戏结束");
			}
			//计分
			function score() {
				var newscore = parseInt($('score').innerHTML) + 1;
				$('score').innerHTML = newscore;
				if (newscore % 10 == 0) {
					jiasu();
				}
			}
			//创建div.row
			function crow() {
				var row = cdiv('row');
				var con = $('container');
				var classes = createSn();
				for (var i = 0; i < 4; i++) {
					row.appendChild(cdiv(classes[i]));
				}
				if (con.firstChild == null) {
					con.appendChild(row);
				} else {
					con.insertBefore(row, con.firstChild);
				}

			}
			//删除最后一行
			function drow() {
				var con = $('container');
				if (con.childNodes.length == 6) {
					con.removeChild(con.lastChild);
				}
			}
			//创建div,className是其类名
			function cdiv(className) {
				var div = document.createElement('div');
				div.className = className;
				return div;
			}
			//返回一个数组,随机其中一个单元值为"cell black",其他三个皆为"cell"
			function createSn() {
				var arr = ['cell', 'cell', 'cell', 'cell'];
				var i = Math.floor(Math.random() * 4);
				arr[i] = 'cell black';
				return arr;
			}
			//按id获取对象
			function $(id) {
				return document.getElementById(id);
			}

			init();
			start();
		</script>
	</body>
</html>
